<template>
  <div class="wrap">
    <img src="@/assets/beSale2.png" alt="" class="beSale" />
    <div class="bgWrap">
      <div class="item">
        <div class="leftTitle">店铺押金</div>
        <div class="right">
          {{ getApplyInformation.chooseShop.title }}
          {{ getApplyInformation.chooseShop.cashPledge }}元
        </div>
      </div>
      <div class="item2">
        <div class="leftTitle">租期限时特惠</div>
        <div class="chooseList">
          <van-radio-group v-model="radio">
            <van-radio
              :name="index"
              checked-color="#000"
              v-for="(item, index) in resRentComboList"
              :key="index"
              >{{ item.tenancyNum }}月 {{ item.tenancyPrice }}元</van-radio
            >
          </van-radio-group>
        </div>
      </div>
    </div>
    <div class="nextButton" @click="jumpResult">确认支付</div>
  </div>
</template>

<script>
import { RadioGroup, Radio } from "vant";
import { apiRentComboList, apiEnterApply, apiUserEnterOrderPay } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      radio: "0",
      getApplyInformation: "", //上一页填写的入驻申请内容
      resRentComboList: [], //租期套餐列表
      resOrderNum: "", //订单号
      resPayInfo:'',//支付需要的信息
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getRentComboList();
    this.getApplyInformation = JSON.parse(sessionStorage.getItem("applyInformation"));
    console.log("申请数据", this.getApplyInformation);
  },
  methods: {
    //查询租期套餐列表
    getRentComboList() {
      apiRentComboList({}).then((res) => {
        this.resRentComboList = res.data;
        console.log("租期套餐列表:", this.resRentComboList);
      });
    },
    jumpResult() {
      console.log("套餐选择", this.radio);
      console.log("请求参数", this.getApplyInformation);
      console.log('对象转字符串',JSON.stringify(this.getApplyInformation.chooseSchoolData))
      //提交申请资料：获取订单id 再发起支付
      apiEnterApply({
        headImg: this.getApplyInformation.headImage,
        idCard: this.getApplyInformation.idCardNum,
        mobile: this.getApplyInformation.contactPhone,
        realName: this.getApplyInformation.contactName,
        schoolId: this.getApplyInformation.chooseSchoolData.schoolId,
        shopName: this.getApplyInformation.shopName,
        shopTypeId: this.getApplyInformation.chooseShop.id,
        studentNum: this.getApplyInformation.schoolNumber,
        tenancyComboId: this.resRentComboList[this.radio].id,
      }).then((res) => {
        this.resOrderNum = res.data;
        this.getUserEnterOrderPay();
        console.log("提交申请获取订单id:", this.resOrderNum);
      });
      // this.$router.push({
      //   path: "/pages/payResult",
      //   query: {
      //     //传递参数
      //   },
      // });
    },
    //根据订单id获取微信支付需要的信息
    getUserEnterOrderPay() {
      apiUserEnterOrderPay({
        orderNum: this.resOrderNum,
      }).then((res) => {
        this.resPayInfo = res.data
        console.log("微信支付相关信息", this.resPayInfo);
        this.onBridgeReady()
      });
    },
    //微信支付：
    onBridgeReady() {
      var that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: that.resPayInfo.appId, //公众号ID，由商户传入
          timeStamp: that.resPayInfo.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: that.resPayInfo.nonceStr, //随机串
          package: that.resPayInfo.package,
          signType: that.resPayInfo.signType, //微信签名方式：
          paySign: that.resPayInfo.sign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.$router.push({
              path: "/pages/payResult",
              query: {
                //传递参数
              },
            });
          }
        }
      );
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
};
</script>

<style scoped>
.beSale {
  width: 95%;
  display: block;
  margin: 15px auto;
}
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
}
.item {
  color: #181818;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.leftTitle {
  font-size: 13px;
  font-weight: 600;
  color: #181818;
}
.right {
  font-weight: 300;
}
.van-radio-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.van-radio {
  width: 40%;
  margin-top: 24px;
}
.nextButton {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 2.5%;
}
</style>
